<template>
	<div class="UsersListDiv">
		<div class="UsersListTitle">
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<router-link class="bold" to="/home">首页</router-link>&nbsp;
					</li>

					<li class="breadcrumb-item">用户管理&nbsp;</li>
					<li class="breadcrumb-item active" aria-current="page">用户列表</li>
				</ol>
			</nav>
		</div>
		<div class="UsersListBody">
			<div class="UsersListBody-top">
				<div class="inpDiv el-col-8">
					<el-input placeholder="请输入内容" v-model="serInput" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
					</el-input>
				</div>
				<div class="inpbtn el-col-3">
					<el-button type="primary" @click="centerDialogVisible1 = true">添加用户</el-button>
				</div>
				<el-dialog title="添加用户" :visible.sync="centerDialogVisible1" width="30%">
					<div class="alterUser">
						<el-form label-width="80px">
							<el-form-item label="账号" required>
								<el-input prefix-icon="el-icon-user" v-model="addUsername">
								</el-input>
							</el-form-item>
						</el-form>
						<el-form label-width="80px">
							<el-form-item label="密码" required>
								<el-input prefix-icon="el-icon-lock" v-model="addPassword">
								</el-input>
							</el-form-item>
						</el-form>
						<el-form label-width="80px">
							<el-form-item label="邮箱">
								<el-input prefix-icon="el-icon-message" v-model="addEmail">
								</el-input>
							</el-form-item>
						</el-form>
						<el-form label-width="80px">
							<el-form-item label="手机号" v-model="addPMobile">
								<el-input prefix-icon="el-icon-mobile">
								</el-input>
							</el-form-item>
						</el-form>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible1 = false">取 消</el-button>
						<el-button type="primary" @click="addBtn">确 定</el-button>
					</div>
				</el-dialog>
			</div>
			<div class="UsersListBody-bot">
				<el-table :data="ListData.users" stripe border style="width: 100%">
					<el-table-column prop="" label="" width="44">
					</el-table-column>
					<el-table-column prop="username" label="用户名" width="265">
					</el-table-column>
					<el-table-column prop="create_time" label="电话" width="261">
					</el-table-column>
					<el-table-column prop="email" label="邮箱" width="261">
					</el-table-column>
					<el-table-column prop="role_name" label="角色" width="261">
					</el-table-column>
					<el-table-column prop="mg_state" label="状态" width="261">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.mg_state" :active-value="1" :inactive-value="0"
								@change="updateBrandStatus($event, scope.row)">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column prop="role" label="操作" width="280">
						<template slot-scope="scope">

							<el-tooltip class="item" effect="dark" content="编辑用户信息" placement="bottom">
								<el-button type="primary" @click="emitBtn(scope.row)">编辑</el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="删除用户" placement="bottom">
								<el-button type="danger" @click="delBtn(scope.row)">删除</el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="为用户分配角色" placement="bottom">
								<el-button type="warning" @click="allotBtn(scope.row)">分配角色</el-button>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog title="修改用户信息" :visible.sync="centerDialogVisible" width="20%">
					<div class="alterUser">
						<el-form label-width="80px">
							<el-form-item label="账号">
								<el-input prefix-icon="el-icon-user" disabled v-model="emitUsername">
								</el-input>
							</el-form-item>
							<el-form-item prop="email" label="邮箱" :rules="[
								{ required: false, message: '请输入邮箱地址', trigger: 'blur' },
								{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
							]">
								<el-input v-model="emitEmail"></el-input>
							</el-form-item>
							<el-form-item prop="mobile" label="手机号" :rules="[
								{ required: false, message: '请输入手机号', trigger: 'blur' },
								{ type: 'email', message: '请输入正确的手机号', trigger: ['blur', 'change'] }
							]">
								<el-input v-model="emitMobile"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="emitTrue">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="分配角色" :visible.sync="centerDialogVisible2" width="40%">
					<div class="allot">
						<p>当前操作用户：{{ allotUser }}</p>
						<p>当前操作用户角色：超级管理员</p>
						<el-form :model="form">
							<el-form-item label="">
								<el-select v-model="form.region" placeholder="请选择">
									<el-option label="区域一" value="shanghai"></el-option>
									<el-option label="区域二" value="beijing"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible2 = false">取 消</el-button>
						<el-button type="primary" @click="allotTrue">确 定</el-button>
					</div>
				</el-dialog>
			</div>
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="pageNum1"
					layout="total, sizes, prev, pager, next, jumper" :total="totalNum">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import user from "@/api/user.js";
export default {
	data() {
		return {
			serInput: '',
			state: true,
			input2: '',
			currentPage4: 1,
			centerDialogVisible: false,//编辑框dialog的值
			centerDialogVisible1: false,//添加框dialog的值
			centerDialogVisible2: false,//分配框dialog的值
			pageNum1: 1,//当前页码
			totalNum: 10,//每页显示条数
			ListData: [],//用户列表数据
			emitState: false,
			delId: '',
			emitId: '',
			emitUsername: '',
			emitEmail: '',
			emitMobile: '',
			addUsername: '',//添加账户名
			addPassword: '',//添加密码
			addEmail: '',//添加邮箱
			addPMobile: '',//添加手机号
			allotId: '',
			allotUser: '',
			formLabelWidth: '120px',
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			},
		}
	},
	mounted() {
		let _this = this;
		let obj = {
			pageNum1: _this.pageNum1,
			totalNum: _this.totalNum,
		}
		user.UsersListData(obj).then((res) => {
			_this.ListData = res.data.data;
			console.log(_this.ListData);
		})

	},
	methods: {
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			let _this = this;
			let obj = {
				pageNum1: _this.pageNum1,
				totalNum: val,
			}
			user.UsersListData(obj).then((res) => {
				_this.ListData = res.data.data;
			})

		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			let _this = this;
			let obj = {
				pageNum1: val,
				totalNum: _this.pageNum1,
			}
			user.UsersListData(obj).then((res) => {
				_this.ListData = res.data.data;
			})
		},
		//修改状态
		updateBrandStatus($event, val) {
			this.$message({
				message: '修改状态成功',
				type: 'success'
			});
			let objUp = {
				upId: val.id,
				stateUp: $event,
			}
			let _this = this;
			user.update(objUp).then((res) => {
				_this.ListData = res.data.data;
				console.log(res);

			})

		},
		// 编辑用户
		emitBtn(val) {
			console.log(val);
			this.centerDialogVisible = true;
			this.emitId = val.id;
			this.emitUsername = val.username;
			this.emitEmail = val.email;
			this.emitMobile = val.create_time;
		},
		// 确认编辑用户
		emitTrue() {
			let _this = this;
			this.centerDialogVisible = false;
			let obj1 = {
				id: this.emitId,
				email: this.emitEmail,
				mobile: this.emitMobile,
			}
			let obj = {
				pageNum1: _this.pageNum1,
				totalNum: _this.totalNum,
			}


			user.emitUsers(obj1).then((res) => {
				_this.ListData = res.data.data;
				console.log(res);
				user.UsersListData(obj).then((res) => {
					_this.ListData = res.data.data;
					console.log(_this.ListData);
				})
			})

		},
		// 删除用户
		delBtn(val) {
			let _this = this;
			let obj = {
				pageNum1: _this.pageNum1,
				totalNum: _this.totalNum,
			}
			this.delId = val.id;

			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				user.delUsers(this.delId).then((res) => {
					console.log(res);
					user.UsersListData(obj).then((res) => {
						_this.ListData = res.data.data;
						console.log(_this.ListData);
					})
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});



		},
		// 添加用户
		addBtn() {
			this.centerDialogVisible1 = false;
			let _this = this;
			let obj1 = {
				addUsername1: _this.addUsername,
				addPassword1: _this.addPassword,
				addEmail1: _this.addEmail,
				addPMobile1: _this.addPMobile
			}
			let obj = {
				pageNum1: _this.pageNum1,
				totalNum: _this.totalNum,
			}
			user.addUsers(obj1).then((res) => {
				_this.ListData = res.data.data;
				console.log(res);
				user.UsersListData(obj).then((res) => {
					_this.ListData = res.data.data;
				})
			})

		},
		// 分配角色
		allotBtn(val) {
			this.centerDialogVisible2 = true
			this.allotUser = val.username
		},
		// 搜索框
		search() {
			let _this = this;
			user.searchUsers(this.serInput).then((res) => {
				_this.ListData = res.data.data;
				console.log(res);

			})
		},
		// 设置权限
		allotTrue() {
			if (this.form.region = '') {
				this.$message.error('请选择权限');

			} else {
				this.$message.error('设置权限失败');
				this.centerDialogVisible2 = false
			}
		},

	},
}
</script>

<style lang="scss">
ul,
ol {
	list-style: none;

}

.bold {
	font-weight: bold;
}

a {
	text-decoration: none;
	color: #000;
}

.breadcrumb-item+.breadcrumb-item::before {
	display: inline-block;
	padding-right: 0.5rem;
	color: #6c757d;
	content: "/";
}

li {
	float: left;
}

.UsersListDiv {
	width: 96.96%;
	height: 96.96%;
	padding: 1.52%;

	.UsersListTitle {
		width: 100%;
		height: 20px;
		line-height: 1;
		font-size: 14px;
	}

	.UsersListBody {
		margin-top: 10px;
		padding: 20px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		color: #303133;

		.UsersListBody-top {
			width: 100%;
			height: 40px;

			.inpDiv {
				// padding-left: 5px;
				// padding-right: 5px;
			}

			.inpbtn {
				margin-left: 15px;
			}
		}

		.UsersListBody-bot {
			margin-top: 10px;

			.allot p {
				margin: 20px 0;
			}
		}

	}
}
</style>